<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>教学FTP服务器管理</title>
  <style>
    body { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,'Microsoft Yahei',sans-serif; margin: 24px; }
    h1 { font-size: 22px; }
    section { border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
    label { display: block; margin: 6px 0; }
    input[type="text"], input[type="password"], input[type="number"] { padding: 6px 8px; width: 320px; }
    button { padding: 6px 12px; margin-right: 8px; cursor: pointer; }
    .status { background: #f9fafb; }
    .users li { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #eee; }
    .muted { color: #6b7280; }
    .ok { color: #16a34a; }
    .stop { color: #dc2626; }
    .hint { font-size: 12px; color: #6b7280; }
  </style>
  <script>
    async function post(url, data) {
      const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: data ? JSON.stringify(data) : undefined });
      return res.json();
    }
    async function del(url) {
      const res = await fetch(url, { method: 'DELETE' });
      return res.json();
    }
    async function refreshStatus() {
      const res = await fetch('/api/status');
      const s = await res.json();
      document.getElementById('running').textContent = s.running ? '运行中' : '已停止';
      document.getElementById('running').className = s.running ? 'ok' : 'stop';
      document.getElementById('host').textContent = s.host;
      document.getElementById('port').textContent = s.port;
      document.getElementById('root').textContent = s.root_dir;
      document.getElementById('anon').textContent = s.anonymous_enabled ? ('已启用（权限：' + s.anonymous_perm + '）') : '未启用';
      const ul = document.getElementById('user-list');
      ul.innerHTML = '';
      s.users.forEach(u => {
        const li = document.createElement('li');
        li.innerHTML = `<span>${u.username} <span class="muted">(${u.perm})</span></span>` +
                       `<span><button onclick="deleteUser('${u.username}')">删除</button></span>`;
        ul.appendChild(li);
      });
    }
    async function startServer() {
      const host = document.getElementById('start-host').value || undefined;
      const port = parseInt(document.getElementById('start-port').value) || undefined;
      await post('/api/server/start', { host, port });
      await refreshStatus();
    }
    async function stopServer() {
      await post('/api/server/stop');
      await refreshStatus();
    }
    async function changeRoot() {
      const path = document.getElementById('root-input').value.trim();
      if (!path) { alert('请输入路径'); return; }
      await post('/api/root', { path });
      await refreshStatus();
    }
    async function addUser() {
      const username = document.getElementById('user-name').value.trim();
      const password = document.getElementById('user-pass').value.trim();
      const perm = document.getElementById('user-perm').value.trim() || 'elradfmwMT';
      if (!username || !password) { alert('请输入用户名和密码'); return; }
      await post('/api/users', { username, password, perm });
      document.getElementById('user-pass').value = '';
      await refreshStatus();
    }
    async function deleteUser(name) {
      await del('/api/users/' + encodeURIComponent(name));
      await refreshStatus();
    }
    async function enableAnon() {
      const perm = document.getElementById('anon-perm').value.trim() || 'elr';
      await post('/api/anonymous/enable', { perm });
      await refreshStatus();
    }
    async function disableAnon() {
      await post('/api/anonymous/disable');
      await refreshStatus();
    }
    window.addEventListener('DOMContentLoaded', refreshStatus);
  </script>
  </head>
<body>
  <h1>教学FTP服务器管理</h1>

  <section class="status">
    <div>状态：<span id="running" class="stop">{{ '运行中' if status.running else '已停止' }}</span></div>
    <div>监听：<code id="host">{{ status.host }}</code> : <code id="port">{{ status.port }}</code></div>
    <div>根目录：<code id="root">{{ status.root_dir }}</code></div>
    <div>匿名访问：<span id="anon">{{ '已启用（权限：' ~ status.anonymous_perm ~ '）' if status.anonymous_enabled else '未启用' }}</span></div>
  </section>

  <section>
    <h3>启动 / 停止 FTP 服务</h3>
    <label>监听地址：<input id="start-host" type="text" placeholder="0.0.0.0（监听全部网卡）" value="0.0.0.0" /></label>
    <label>端口：<input id="start-port" type="number" placeholder="2121" value="2121" /></label>
    <p class="hint">学生连接时请使用“教师电脑的IP地址 + 端口”，默认端口 2121。</p>
    <button onclick="startServer()">启动</button>
    <button onclick="stopServer()">停止</button>
  </section>

  <section>
    <h3>设置 FTP 根目录</h3>
    <label>路径：<input id="root-input" type="text" placeholder="例如：E:\\共享资料\\ftp_root" value="{{ status.root_dir }}" /></label>
    <p class="hint">更改后，所有账户家目录将指向此路径。请确保该路径存在并可访问。</p>
    <button onclick="changeRoot()">保存根目录</button>
  </section>

  <section>
    <h3>用户管理</h3>
    <label>用户名：<input id="user-name" type="text" placeholder="例如：student01" /></label>
    <label>密码：<input id="user-pass" type="password" placeholder="请输入密码" /></label>
    <label>权限：<input id="user-perm" type="text" placeholder="elradfmwMT（默认全部权限）" /></label>
    <p class="hint">权限字符说明：e=列目录 l=切换目录 r=下载 a=上传 d=删除 f=重命名 m=创建目录 w=写文件 M=改变权限 T=修改时间。</p>
    <button onclick="addUser()">添加用户</button>
    <h4>已添加用户</h4>
    <ul class="users" id="user-list">
      {% for u in status.users %}
      <li>
        <span>{{ u.username }} <span class="muted">({{ u.perm }})</span></span>
        <span><button onclick="deleteUser('{{ u.username }}')">删除</button></span>
      </li>
      {% endfor %}
    </ul>
  </section>

  <section>
    <h3>匿名访问</h3>
    <label>匿名权限：<input id="anon-perm" type="text" placeholder="建议 elr（只读）" value="elr" /></label>
    <button onclick="enableAnon()">启用匿名</button>
    <button onclick="disableAnon()">禁用匿名</button>
    <p class="hint">启用后，学生可使用用户名 anonymous 登录。匿名默认不需要密码。</p>
  </section>

</body>
</html>